<template>
  <div  style="position: relative;">
    <mmTable ref="mmTable" :mmColumns="columns" :getUrl="url" :updateUrl="updateUrl" :delUrl="delUrl"
             :form="form" :formData="formData" v-on:formDataChange="formDataChange"
             :searchFormData="searchFormData" :searchForm="searchForm"
             :modalWidth="600">
      <Form slot="searchForm" ref="searchForm" :model="searchFormData" inline :label-width="70"  style="float: left">
        <FormItem label="用户名" prop="">
          <Input v-model="searchFormData.name" type="text" placeholder="" />
        </FormItem>
      </Form>
      <Form  slot="editForm" :label-width="100" :model="formData" inline ref="editForm" :rules="formValidate">
        <Row>
          <Col :span="24">
          <FormItem label="车牌" prop="car" style="width:500px" >
            <Input v-model="formData.car" type="text"  />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
          <FormItem label="毛重(吨)" prop="weigh" style="width:500px">
            <Input v-model="formData.weigh" type="text"  />
          </FormItem>
          </Col>
        </Row>

        <Row>
          <Col :span="24">
          <FormItem label="备注" prop="memo" style="width:500px" >
            <Input v-model="formData.memo" type="textarea"  />
          </FormItem>
          </Col>
        </Row>
      </Form>
    </mmTable>

    <Modal title="车辆出厂" v-model="outFormVisible"  :width="500">

      <Form :model="outData" inline ref="ccForm" :label-width="150"  >
        <Row>
          <Col :span="24" >
          <FormItem label="皮重(吨)" prop="ccweigh" style="width:400px" >
            <Input v-model="outData.ccweigh" type="text"  />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
          <FormItem label="备注" prop="name" style="width: 400px">
            <Input v-model="outData.outmemo" type="textarea" height="200"/>
          </FormItem>
          </Col>
        </Row>
      </Form>

      <div slot="footer">
        <Button type="text" @click="cancelEdit">取消</Button>
        <Button type="primary"  @click="submitEdit">提交</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
import mmTable from '../components/mmtable/mmtable.vue'
import { ccSave } from '@/api/data'
export default {
  components: {
    mmTable
  },
  data () {
    return {
      formVisible: false,
      columns: [
        { title: '入厂编号', key: 'billcode', width: 200, align: 'center' },
        { title: '车牌', key: 'car', width: 200, align: 'center' },
        { title: '入厂时间', key: 'rctime', width: 200, align: 'center' },
        { title: '毛重(吨)', key: 'weigh', width: 200, align: 'center' },
        {
          title: '出厂',
          key: 'action',
          width: 200,
          align: 'center',

          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showForm(params.row)
                  }
                }
              },
              '出厂'
            )
          }
        },
        { title: '备注', key: 'memo', align: 'left' }

      ],
      url: '/pound/getList',
      updateUrl: '/pound/Save',
      delUrl: '/pound/Delete',
      form: {},
      outFormVisible: false,
      outData: {
        ccweigh: '',
        id: '',
        outmemo: ''
      },
      formValidate: {
      },
      searchForm: {},
      searchFormData: {
        code: '',
        name: ''
      },
      /* 后台传的数据 */
      formData: {
        car: '',
        weigh: '',
        rctime: '',
        billcode: '',
        memo: ''
      },

      searchFormData: {
        name: ''
      },
      searchForm: {}
    }
  },
  mounted () {
    this.form = this.$refs.editForm
    this.searchForm = this.$refs.searchForm
  },
  /* 方法 */
  methods: {
    formDataChange (data) {
      this.formData = data
    },
    cancelEdit () {
      this.outFormVisible = false
    },

    submitEdit () {
      let that = this
      ccSave(that.outData).then(res => {
        that.outFormVisible = false
        that.$refs.mmTable.init()
      }
      )
    },
    showForm (params) {
      this.outData.id = params.id
      this.outFormVisible = true
    }

  }
}
</script>

<style>

</style>
